import React, { useState, useRef, useEffect } from "react";
import "./App.css";

function App(props: any) {
  const [count, setCount] = useState(0);
  const canvasRef = useRef<any>(null);

  const updateCanvas = () => {
    var c = canvasRef.current.getContext("2d");
    c.fillStyle = "#fff";
    c.fillRect(0, 0, 800, 600);

    var grad = c.createLinearGradient(0, 0, 300, 0);
    grad.addColorStop(0, "white");
    grad.addColorStop(0.5, "red");
    grad.addColorStop(1, "black");
    c.fillStyle = grad;
    c.font = "96px Arial";
    c.fillText(count, 20, 150);
  };

  const add = () => {
    setCount(count + 1);
  };

  const subtract = () => {
    setCount(count - 1);
  };

  useEffect(() => {
    updateCanvas();
  });

  return (
    <div className="App">
      <div>{count}</div>
      <div>
        <button onClick={() => add()}>加</button>
        &nbsp;&nbsp;
        <button onClick={() => subtract()}>减</button>
      </div>
      <div>
        <canvas width="800" height="600" ref={canvasRef}></canvas>
      </div>
    </div>
  );
}

export default App;
